<template>
  <div>
    <all-header title="验证码登录" />
    <div class="form">
      <div class="username">
        <input
          placeholder="手机号"
          v-model="params.mobile"
          @input="CheckPhone(params.mobile)"
        />
      </div>

      <div class="smscode">
        <input
          type="text"
          placeholder="请输入验证码"
          v-model="params.captcha"
        />
        <div class="sendbtn" @click="sendCode">{{ codeText }}</div>
      </div>
    </div>
    <all-btn title="登录" :loading="loading" @click="login" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Toast } from "vant";
import { onBeforeRouteLeave, useRouter } from "vue-router";
import commonStore from "../../store/common";
import checkPhone from "../../util/checkPhone";

const params = ref({
  mobile: "",
  captcha: "",
});

// 手机号格式校验
let checkPhoneFlage = ref(false);
const CheckPhone = (mobile) => {
  if (checkPhone.checkPhone(mobile)) {
    checkPhoneFlage.value = true;
  } else {
    checkPhoneFlage.value = false;
  }
};

// 发送验证码
const common = commonStore();
let codeText = ref("发送验证码");
let sending = ref(false);
let timer = ref(null);
let time = 60;
onBeforeRouteLeave(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
const sendCode = () => {
  if (!checkPhoneFlage.value) {
    return Toast.fail("手机号格式不正确");
  }
  sending.value = true;
  codeText.value = "发送中...";
  common
    .sendCode({ mobile: params.value.mobile, event: "login" })
    .then(() => {
      Toast.success("发送成功");
      timer.value = setInterval(() => {
        codeText.value = time + "秒后再次获取";
        if (time == 0) {
          codeText.value = "发送验证码";
          sending.value = false;
          time = 60;
          clearInterval(timer.value);
        }
        time--;
      }, 1000);
    })
    .catch(() => {
      codeText.value = "发送验证码";
      sending.value = false;
      time = 60;
      clearInterval(timer.value);
    });
};

const loading = ref(false);
const router = useRouter();
const login = () => {
  if (!params.value.captcha) {
    return Toast.fail("验证码不能为空");
  }
  loading.value = true;
  common
    .captcha_login(params.value)
    .then(() => {
      common.getUserInfo().then(() => {
        loading.value = false;
        Toast.success("登录成功!");
        router.push({ name: "home" });
      });
    })
    .catch(() => {
      loading.value = false;
    });
};
</script>


<style lang="scss" scoped>
.form {
  padding: 0.3846rem;
  padding-top: 20%;

  input {
    font-size: 0.2885rem;
    width: 100%;
    margin-bottom: 0.7692rem;
    padding-bottom: 0.1923rem;
    border: none;
    border-bottom: 0.0192rem solid #e8e8e8;
  }

  .smscode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3846rem;
    input {
      width: 60%;
    }
    .sendbtn {
      margin-top: -0.4808rem;
      color: black;
    }
  }
}
.success {
  padding-top: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: bold;
  .sc_text {
    font-size: 15px;
  }
  img {
    width: 100px;
    height: 100px;
    padding-bottom: 20px;
  }
}
</style>